<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flash Cards</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../static/flashcard.css" />
    <!--<script 
       src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js">
    </script>-->
    <script src="../static/card.js"></script>
  </head>
  
  <body>
    <div id="container">
      <section id="front">
	<p>
	  {{ fForLang }}
	  {{ fPronunciation }}
	  {{ fNatLang }}
	  {{ fAudio }}
	  <button id="showButton">Show Answer</button>
	</p>
      </section><!--front-->

      <section id="back">
	<p>
	  {{ bForLang }}
	  {{ bPronunciation }}
	  {{ bNatLang }}
	  {{ bAudio }}
	</p>
	<button type="button" id="missed">Missed</button>
	<button type="button" id="hard">Hard</button>
	<button type="button" id="soSo">So-So</button>
	<button type="button" id="easy">Easy</button>
      </section>
    </div><!--container-->
  </body>
</html>
